<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">设置</view>
		</cu-custom>
		<view :class="['margin-xs radius shadow shadow-lg bg-white cu-list menu' ,BackGroundBox]">
			<!-- <view class="cu-form-group margin-top">
				<view class="action">
					<text class="cuIcon-cascades text-icon text-cascades"></text> 功能列表样式
				</view>
				<view class="action">
					<button class="cu-btn bg-green shadow" @tap="showModal" data-target="gridModal">设置</button>
				</view>
			</view>
			<view class="cu-modal" :class="modalName=='gridModal'?'show':''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop>
					<radio-group class="block" @change="Gridchange">
						<view class="cu-list menu text-left">
							<view class="cu-item" v-for="(item,index) in 4" :key="index">
								<label class="flex justify-between align-center flex-sub">
									<view class="flex-sub">{{index +2}} 列</view>
									<radio class="round" :value="(index + 2) + ''" :class="gridCol==index+2?'checked':''" :checked="gridCol==index+2"></radio>
								</label>
							</view>
						</view>
					</radio-group>
					<view class="cu-list menu text-left solid-top">
						<view class="cu-item">
							<view class="content">
								<text class="text-grey">边框</text>
							</view>
							<view class="action">
								<switch @change="Gridswitch" :class="gridBorder?'checked':''" :checked="gridBorder?true:false"></switch>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="cu-form-group" @tap="Refresh">
				<view class="item-icon">
					<view class="action">
						<text class="cuIcon-refresh text-icon text-cascades"></text> 刷新菜单
					</view>
				</view>
			</view>
			<!-- #ifndef APP-PLUS -->
			<view class="cu-form-group">
				<view class="action">
					<text class="cuIcon-vip text-icon text-cascades "></text> 字体
				</view>
				<view class="action item-icon" style="padding-right: 30rpx;justify-content: flex-end;" @tap="taggerto">{{fontFamily}}</view>
			</view>
			<!-- #endif -->
			<view class="cu-form-group">
				<view class="action">
					<text class="cuIcon-font text-icon text-cascades "></text> 字体加粗
				</view>
				<switch @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
			</view>
			<view class="cu-form-group">
				<view class="action">
					<text class="cuIcon-creativefill text-icon text-cascades "></text> 护眼模式
				</view>
				<switch @change="SwitchB" :class="switchB?'checked':''" :checked="switchB?true:false"></switch>
			</view>
			<view class="cu-form-group" @tap="jumpabout">
				<view class="item-icon">
					<view class="action">
						<text class="cuIcon-friendfamous text-icon text-cascades"></text> 关于我们
					</view>
				</view>
			</view>
			<!-- <view class="cu-form-group" @tap="jumpnotice">
				<view class="item-icon">
					<view class="action">
						<text class="cuIcon-notice text-icon text-cascades"></text> 公告
					</view>
				</view>
			</view> -->
			<view class="cu-form-group" @tap="jumpupdate">
				<view class="item-icon">
					<view class="action">
						<text class="cuIcon-discoverfill text-icon text-cascades"></text> 更新记录
					</view>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="cu-item arrow" style="border-top:2rpx solid #eee;">
				<button class="cu-btn content" open-type="feedback" style="color:#66666">
					<text class="cuIcon-edit text-icon text-cascades"></text>
					<text class="">意见反馈</text>
				</button>
			</view>
			<!-- #endif  -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="cu-form-group arrow arrow" @tap="jumpfeedback">
				<view class="item-icon">
					<view class="action">
						<text class="cuIcon-edit text-icon text-cascades"></text> 用户反馈
					</view>
				</view>
			</view>
			<!-- #endif  -->
			<!-- #ifdef APP-PLUS-->
			<!-- <view class="cu-form-group ">
				<view class="action">
					<text class="cuIcon-flashlightopen text-icon text-cascades"></text> 屏幕亮度
				</view>
				<slider class="cu-silder" :value="brightness" @change="sliderChange" activeColor="#FFCC33" backgroundColor="#000000"
				 block-color="#8A6DE9" block-size="20" />
			</view> -->
			<view class="cu-form-group" @tap="CheckUpdate">
				<view class="item-icon">
					<view class="action">
						<text class="cuIcon-pullup text-icon text-cascades"></text> 检查更新
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="action">
					<text class="cuIcon-info text-icon text-cascades"></text> 当前版本
				</view>
				<view>{{getversion}}</view>
			</view>
			<!-- #endif -->
		</view>
		<view class="cu-modal bottom-modal" :class="modalNamepal=='modalNamepal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="hideModal">取消</view>
					<view class="action text-green" @tap="hideModalpal">确定</view>
				</view>
				<view class="grid col-3 padding-sm">
					<view v-for="(item,index) in checkbox" class="padding-xs" :key="index">
						<button class="cu-btn orange lg block" :class="item.checked?'bg-orange':'line-orange'" @tap="ChooseCheckbox"
						 :data-value="index"> {{item.name}}
							<view class="cu-tag sm round" :class="item.checked?'bg-white text-orange':'bg-orange'" v-if="item.hot">HOT</view>
						</button>
					</view>
				</view>
			</view>
		</view>
		<view class="pofi">
			<view class="" @tap="privacy">
				<u-link class="link" style="padding: 10rpx;" :text="'用户协议'"></u-link>
				<text>与</text>
				<u-link class="link" style="padding: 10rpx;" :text="'隐私政策'"></u-link>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import uLink from "@/colorui/components/uni-link/uni-link.vue"
	import utils from '@/static/js/utils.filter.js';
	export default {
		data() {
			return {
				modalName: null,
				modalNamepal: null,
				height: this.screenHeight,
				fontFamily: uni.getStorageSync('fontFamily') || "楷体",
				gridCol: uni.getStorageSync('gridCol') || 3,
				gridBorder: uni.getStorageSync('gridBorder') || false,
				switchA: uni.getStorageSync('font-weight'),
				switchB: uni.getStorageSync('BackGround-Flag'),
				brightness: uni.getStorageSync('brightness') || 50,
				checkbox: [{
					value: 0,
					name: '楷体',
					checked: true,
				}, {
					value: 1,
					name: '宋体',
					checked: false,
				}, {
					value: 2,
					name: '仿宋',
					checked: false,
				}, {
					value: 3,
					name: '微软雅黑',
					checked: false,
				}, {
					value: 4,
					name: '正楷',
					checked: false,
				}, {
					value: 5,
					name: '黑体',
					checked: false,
				}]
			}
		},
		computed: {
			...mapGetters([
				'Style',
				'Font',
				'getversion',
				'BackGround',
				'BackGroundBox'
			])
		},
		components: {
			uLink
		},
		onLoad() {
			for (let item of this.checkbox) {
				let text = uni.getStorageSync('fontFamily') || "楷体"
				if (item.name == text) {
					item.checked = true
				} else {
					item.checked = false
				}
			}
		},
		mounted() {

		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			taggerto(e) {
				this.modalNamepal = 'modalNamepal'
			},
			hideModal(e) {
				this.modalName = null
				this.modalNamepal = null
			},
			hideModalpal(e) {
				this.modalNamepal = null
			},
			ChooseCheckbox(e) {
				let items = this.checkbox;
				let values = e.currentTarget.dataset.value;
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].value == values) {
						items[i].checked = !items[i].checked;
						this.$store.commit('setfont', items[i].name);
						this.fontFamily = items[i].name
						uni.setStorage({
							key: 'fontFamily',
							data: items[i].name
						})
					} else {
						items[i].checked = false;
					}
				}
			},
			// 跳转关于页面
			jumpabout() {
				uni.navigateTo({
					url: './about/about',
				});
			},
			// 跳转公告页面
			jumpnotice() {
				uni.navigateTo({
					url: './Notice/Notice',
				});
			},
			//刷新菜单
			Refresh() {
				global.tree = true
				uni.showToast({
					title: '刷新成功',
					icon: 'none'
				})
			},
			//跳转到用户反馈页面
			jumpfeedback() {
				uni.navigateTo({
					url: '../home/system/Userfeedback/Userfeedback',
				});
			},
			// 跳转更新记录页面
			jumpupdate() {
				uni.navigateTo({
					url: '/pages/home/system/Updaterecord/Updaterecord',
				});
			},
			CheckUpdate() {
				console.log(plus.runtime.appid);
				console.log(plus.runtime.version);
				uni.request({
					url: 'http://47.101.156.202:8443/huajin/checkVersion', //检查更新的服务器地址
					data: {
						appid: plus.runtime.appid,
						version: plus.runtime.version,
					},
					success: (res) => {
						console.log('success', res);
						if (res.statusCode == 200 && res.data.code == 0) {
							let openUrl = plus.os.name === 'iOS' ? res.data.data.url : res.data.data.url;
							uni.showModal({
								title: '更新提示',
								content: res.data.data.updataInfo ? res.data.data.updataInfo : '是否选择更新',
								success: (showResult) => {
									if (showResult.confirm) {
										plus.runtime.openURL(openUrl);
									}
								}
							})
						} else {
							uni.showToast({
								title: '已经是最新版本',
								icon: 'none',
								duration: 2000
							});
						}
					}
				})
			},
			SwitchA(e) {
				this.switchA = e.detail.value
				if (this.switchA) {
					this.$store.dispatch('mysetbold', 'bold');
					uni.setStorage({
						key: 'style',
						data: 'bold'
					})
				} else {
					this.$store.dispatch('mysetbold', 'inherit');
					uni.setStorage({
						key: 'style',
						data: 'inherit'
					})
				}
				uni.setStorage({
					key: 'font-weight',
					data: e.detail.value
				})
			},
			SwitchB(e) {
				this.switchB = e.detail.value
				if (this.switchB) {
					// 开启护眼模式
					console.log('开启护眼模式');
					this.$store.commit('setBackGround', 'uni-bg-color-night');
					this.$store.commit('setBackGroundBox', 'uni-bg-color-night-box');
					uni.setStorage({
						key: 'BackGround',
						data: 'uni-bg-color-night'
					})
					uni.setStorage({
						key: 'BackGroundBox',
						data: 'uni-bg-color-night-box'
					})
				} else {
					console.log('关闭护眼模式');
					let time = utils.timeTodate('H:i', new Date().getTime());
					let date = uni.getStorageSync('weather');
					if (this.CompareDate(time, date.forecast[0].sunrise) && !this.CompareDate(time, date.forecast[0].sunset)) {
						console.log('现在是白天');
						this.$store.commit('setBackGround', 'uni-bg-color-day');
						this.$store.commit('setBackGroundBox', 'uni-bg-color-day-box');
						uni.setStorage({
							key: 'BackGround',
							data: 'uni-bg-color-day'
						})
						uni.setStorage({
							key: 'BackGroundBox',
							data: 'uni-bg-color-day-box'
						})
					} else {
						console.log('现在是夜间');
						this.$store.commit('setBackGround', 'uni-bg-color-night');
						this.$store.commit('setBackGroundBox', 'uni-bg-color-night-box');
						uni.setStorage({
							key: 'BackGround',
							data: 'uni-bg-color-night'
						})
						uni.setStorage({
							key: 'BackGroundBox',
							data: 'uni-bg-color-night-box'
						})
					}
				}
				uni.setStorage({
					key: 'BackGround-Flag',
					data: e.detail.value
				})
			},
			// sliderChange(e) {
			// 	console.log('value 发生变化：' + e.detail.value);
			// 	uni.setStorage({
			// 		key: 'brightness',
			// 		data: e.detail.value
			// 	})
			// 	uni.setScreenBrightness({
			// 		value: e.detail.value / 100,
			// 		success: function() {
			// 			console.log('success');
			// 		}
			// 	});
			// },
			Gridchange(e) {
				this.gridCol = e.detail.value
				uni.setStorage({
					key: 'gridCol',
					data: e.detail.value
				})
			},
			Gridswitch(e) {
				this.gridBorder = e.detail.value
				uni.setStorage({
					key: 'gridBorder',
					data: e.detail.value
				})
			},
			CompareDate(t1, t2) {
				var date = new Date();
				var a = t1.split(":");
				var b = t2.split(":");
				return date.setHours(a[0], a[1]) > date.setHours(b[0], b[1]);
			},
			privacy(){
				uni.navigateTo({
					url:'./privacy/privacy'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: whitesmoke;
	}

	.cu-form-group {
		color: #888888;
	}
	.pofi {
		position: fixed;
		bottom: 30rpx;
		left: 31%;
	}
</style>
